<template>
	<view>
        <view class="list-header">
            <view :class="current === index ? 'date-item active' : 'date-item'" v-for="(item,index) in datesText" :key="index" @click="current = index">
                <view>
                    <view class="date">{{ item }}</view>
                    <view class="status">{{ !index ? '进行中' : '未开始' }}</view>
                </view>
            </view>
        </view>
		<view class="list-box">
		    <view class="goods-item" v-for="(item,index) in goodsList" data-flex="box:first" :key="index" @click="goodsHandle(item)">
		        <image class="goods-img" :src="item.pic" mode=""></image>
                <view class="goods-info">
                    <view class="name">{{ item.goodsName }}</view>
                    <view class="desc">{{ item.goodsDesc }}</view>
                    <view class="info">
                        <text>团购价：¥{{ item.groupPrice }}</text>
                        <text class="disable">¥{{ item.originPrice }}</text>
                    </view>
                </view>
		    </view>
            <view class="goods-item" v-show="!goodsList">
                <view class="tips">今天没有团购商品</view>
            </view>
		</view>
	</view>
</template>

<script>
import Api from '@/common/api';
export default {
	name: 'timingBuy',
    data() {
        return {
            // 当前选中的活动日
            current: '',
            // 接口返回的活动日, 例如 '04-24'
            datesCode: [],
            // 转换为 x月x日
            datesText: [],
            // 列表数据
            goodsList: '',
			pageNum: 1,
			pageSize: 10
        }
    },
    created() {
        this.getDates();
    },
    watch: {
        current() {
            this.getGoodsList('headerRefreshing');
        }
    },
	// 上拉加载
	onReachBottom() {
		this.getGoodsList('load');
	},
    methods: {
        // 活动日
        async getDates() {
            var params = {
                'dayNum': '10',
                'pageNum': '1',
                'pageSize': '10'
            };
            var data = await Api.apiCall('get', Api.index.timingBuyDay, params);
            this.datesCode = data.records.filter(function(item) {
                // 过滤到等于今天的时间
                return item !== (new Date().getMonth() + 1) + '-' + (new Date().getDate());
            });
            this.datesText = this.datesCode.map(function(item) {
                return `${item.slice(0,2)}月${item.slice(3,5)}日`;
            });
            this.datesText.unshift('今天');
            this.datesCode.unshift('');
            this.current = 0;
        },
        // 活动商品
        async getGoodsList(sign) {
			if(sign == 'headerRefreshing') {
				this.pageNum = 1;
			} else {
				this.pageNum ++;
			}
            // 活动当天, 例如 2020-04-24
            if(this.datesCode[this.current]) {
                var date = `${new Date().getFullYear()}-${this.datesCode[this.current]}`;
            } else {
                var date = '';
            }
            var params = {
                'dateParam': date,
                'pageNum': this.pageNum,
                'pageSize': this.pageSize
            };
            var data = await Api.apiCall('get', Api.index.timingBuyList, params);
			if(this.pageNum == 1) {
				this.goodsList = [];
			}
            this.goodsList = this.goodsList.concat(data.records);
        },
        // 点击商品
        goodsHandle(item) {
			if(this.current !== 0) {
				this.$api.msg('该商品活动还未开始');
				return;
			}
            // 路径
            var url = '/pages/langwen/detail';
            var {smsGroupId,pmsProductSkuId} = item;
            uni.navigateTo({
                url: `${url}?id=${item.goodsId}&smsGroupId=${smsGroupId}&pmsProductSkuId=${pmsProductSkuId}`
            });
        }
    }
}
</script>

<style lang="scss">
    .goods-item {
        margin: 20rpx;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 30rpx;
        .goods-img {
            width: 160rpx;
            height: 216rpx;
            margin-right: 24rpx;
        }
        .goods-info {
            .name {
                font-size: 32rpx;
                font-weight:400;
                color:rgba(51,51,51,1);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .desc {
                height: 76rpx;
                margin: 20rpx 0 30rpx;
                font-size: 28rpx;
                font-weight:400;
                color:rgba(191,191,191,1);
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
        }
        .info {
            font-size: 28rpx;
            font-weight: 600;
            color: rgba(255,101,24,1);
            .disable {
                margin-left: 20rpx;
                color: #BFBFBF;
                text-decoration: line-through;
            }
        }
        .tips {
            text-align: center;
            font-size: 26rpx;
            color:rgba(191,191,191,1);
        }
    }
    .list-header {
        display: -webkit-box;
        overflow-x: scroll;
        height: 134rpx;
        width: 100%;
        .date-item {
            display: flex;
            align-items: center;
            margin: 0 10px;
            color: rgba(255, 255, 255, 0.6);
            text-align: center;
            .date {
                font-size: 32rpx;
                font-weight: 600;
            }
            .status {
                font-size: 24rpx;
                font-weight: 500;
            }
            &.active {
                color: #fff;
                .date {
                    font-size: 40rpx;
                }
            }
        }
    }

    page {
        background-image: url(../../static/index_bg.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-color: #F5F5F5;
        background-position-y: -1px;
    }
</style>
